<script lang="ts" setup>
import { doGetCaptcha, doRegister } from '@/api/auth';
import { Captcha, Register } from '@/api/auth/type';
import Header from '@/components/Header.vue';
import { useAuthStore } from '@/store/auth';
import { onMounted, ref } from 'vue';

const upload = ref([])

const register = ref({
    user: {},
    captcha: {}
} as Register)

const onSubmit = async () => {
    await doRegister(register.value);
    const authStore = useAuthStore();
    authStore.goLogin();
}

const uploadAvatar = (file: object, _detail: object) => {
    const upload = file as Upload;
    register.value.user.avatar = upload.content;
}

const getCaptcha = () => {
    doGetCaptcha().then((res) => {
        const data = res.data as Captcha;
        register.value.captcha = data;
    });
}

onMounted(() => {
    getCaptcha();
})

type Upload = {
    content: string,
    file: File,
    message: string,
    objectUrl: string,
    status: string
}

</script>

<template>
    <div class="container">
        <Header></Header>
        <div class="body">
            <van-form @submit="onSubmit">
                <div class="avatar">
                    <van-uploader :v-model="upload" :after-read="uploadAvatar" multiple>
                        <van-image
                            :round="true"
                            width="160"
                            height="160"
                            :src="register.user.avatar"
                        />
                    </van-uploader>
                </div>
                <van-cell-group inset>
                    <van-field
                        v-model="register.user.nickname"
                        name="昵称"
                        label="昵称"
                        placeholder="昵称"
                        :rules="[{ required: true, message: '请填写昵称' }]"
                    />
                    <van-field
                        v-model="register.user.username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请输入正确的用户名', pattern: new RegExp('^[a-zA-Z0-9]{4,10}$') }]"
                    />
                    <van-field
                        v-model="register.user.password"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请输入正确的密码' }]"
                    />
                    <van-field
                        v-model="register.user.phone"
                        name="手机号"
                        label="手机号"
                        placeholder="手机号"
                        :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <van-field
                        v-model="register.captcha.captchaCode"
                        name="验证码"
                        label="验证码"
                        placeholder="验证码"
                        :rules="[{ required: true, message: '请填写验证码' }]"
                    >
                        <template #input>
                            <div class="captcha">
                                <van-field
                                    style="padding: 0%;"
                                    v-model="register.captcha.captchaCode"
                                    name="验证码"
                                    placeholder="验证码"
                                    :rules="[{ required: true, message: '请填写验证码' }]"
                                />
                                <van-image
                                    @click="getCaptcha"
                                    class="image"
                                    width="200"
                                    height="30"
                                    :src="register.captcha.captchaBase64"
                                />
                            </div>
                        </template>
                    </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                    注册
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .body {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-grow: 1;
        .van-form {
            display: flex;
            flex-direction: column;
        }
        .avatar {
            display: flex;
            justify-content: center;
            margin: 5%;
            border-radius: 15%;
        }
    }
}
.captcha {
    display: flex;
    .image {
        display: flex;
    }
}
</style>